<template>
  <el-dialog
    width="100%"
    top="0"
    :fullscreen="true" 
    :title="'详细信息'"
    :close-on-click-modal="false"
    :visible.sync="visible"  >

    <el-form :model="dataForm" id="printMe" ref="dataForm" label-width="130px">
      <el-row>
        <el-col :span="24">
          <div  style="text-align:center;font-weight:bold;font-size:20px;border-top:1px solid white;border-right:1px solid white;border-left:1px solid white;margin-bottom:30px;">商品房合同备案信息表</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="合同签约备案号" prop="contractno" class="label_font">
            <el-input v-model="dataForm.contractno"  :disabled="true" style="100%"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="签约备案时间" prop="recorddate" class="label_font">
            <el-input v-model="dataForm.recorddate"  :disabled="true" style="100%"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="出卖人" prop="seller" class="label_font">
            <el-input v-model="dataForm.seller"  :disabled="true" style="100%"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
            <el-row>
        <el-col :span="24">
          <div   style="text-align:center;font-weight:bold;font-size:16px;background:#D3D3D3;border: 1px solid #ddd;height:40px;line-height:40px;">房屋信息</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          
            <table id="table-detail" class="table table-bordered"  border="1"  style="border-color:#ddd;"  cellspacing="0">
              <tr>
            		<td class="title" >房屋坐落</td>
            		<td class="title" >房屋唯一号</td>
            		<td class="title" >用途</td>
                <td class="title" >建筑面积</td>
            	</tr>
     
                <tr v-for="(house,index) in this.houselist" :key="index">
                  <td  class="text">{{house.djzl}}</td>
                  <td  class="text" >{{house.tableid}}</td>
                  <td  class="text" >{{house.fwyt}}</td>
                  <td  class="text" >{{house.jzmj}}</td>
                </tr>    
            </table>


        </el-col>
      </el-row>
            <el-row>
        <el-col :span="24">
          <div  style=" text-align:center;font-weight:bold;font-size:16px;background:#D3D3D3;border: 1px solid #ddd;height:40px;line-height:40px;">抵押备案信息</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">

            <table id="table-detail" class="table table-bordered"  border="1"  style="border-color:#ddd;"  cellspacing="0">
              <tr>
            		<td class="title" >贷款银行（抵押权人）</td>
            		<td class="title" >抵押人（债务人）</td>
            		<td class="title" >抵押面积</td>
            	</tr>
     
                <tr v-for="(dyba,index) in this.dybaInfoList" :key="index">
                  <td  class="text">{{dyba.dyqr}}</td>
                  <td  class="text" >{{dyba.qlr}}</td>
                  <td  class="text" >{{dyba.dymj}}</td>
                </tr>
    
            </table>

        </el-col>
      </el-row>
     
      <el-row>
        <el-col :span="24">
          <div  style=" text-align:center;border: 1px solid #ddd;font-weight:bold;font-size:16px;background:#D3D3D3;height:40px;line-height:40px;100%;">买受人</div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24" >
            <table id="table-detail" class="table table-bordered"  border="1" style="border-color:#ddd;" cellspacing="0">
              <tr>
            		<td class="title" >名称</td>
            		<td class="title" >证件类型</td>
            		<td class="title" >证件号码</td>
            		<td class="title" >份额</td>
            	</tr>
     
                <tr v-for="(qlr,index) in this.qlrList" :key="index">
                  <td  class="text">{{qlr.name}}</td>
                  <td  class="text" >{{qlr.idtype}}</td>
                  <td  class="text" >{{qlr.idcode}}</td>
                  <td  class="text" >{{qlr.protion}}</td>
                </tr>
    
            </table>
              
        </el-col>
      </el-row>

    </el-form>



    <span slot="footer" class="dialog-footer">
      <el-button  type="primary"  icon="el-icon-printer"  v-print="printObj">打印</el-button>
      <el-button @click="visible = false">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {

        printLoading: true,
        printObj: {
          id: "printMe",
          popTitle: '&nbsp;',
          headerStyle: 'text-align:center;color:#f00;width:100%;border:1px #000 solid;',
          
        scanStyles: false,
        style: 'table tr td,th { border-collapse: collapse;padding: 15px;border:1px #000 solid; }',
          beforeOpenCallback (vue) {
            vue.printLoading = true
            console.log('打开之前')
          },
          openCallback (vue) {
            vue.printLoading = false
            console.log('执行了打印')
          },
          closeCallback (vue) {
            console.log('关闭了打印工具')
          }
        },

        visible: false,
        houselist: [],
        dataListLoading: false,
        dybaInfoList: [],

        qlrList: [],
        dataForm:{
            contractno: '',
            recorddate: '',
            seller: ''
        }
      }
    },
    methods: {

      init (serialno) {
        this.dataListLoading = true;
        this.visible = true
        this.$nextTick(() => {

  
            this.$http({
              url: this.$http.adornUrl(`/bdc/bdccontract/detail`),
              method: 'post',
              data: this.$http.adornData({
                  'serialno': serialno
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.houselist = data.houseList
                this.dybaInfoList = data.dybaInfoList
                this.dataForm.seller = data.seller
                this.dataForm.recorddate = data.recorddate
                this.dataForm.contractno = data.contractno
                this.qlrList = data.qlrList
                this.dataListLoading = false;
              }
            })
          
        })
      }
     
     
    }
  }
</script>
<style>
.el-input.is-disabled .el-input__inner {
    background-color: #f5f7fa;
    border-color: #e4e7ed;
    color: #313b50;
    cursor: not-allowed;
}


    .title{
    	text-align:center;font-weight:bold; border: 1px solid #ddd;
    }
    
    .text{
    	text-align:center;font-weight:normal;
    	border: 1px solid #ddd;

    }
    
    .head{
      text-align:center;font-weight:bold;font-size:16px;background:#D3D3D3;border: 1px solid #ddd;

    }
    



.table {
    width: 100%;
    max-width: 100%;
}
</style>